<template>
	<view>
		<view class="container b-f">
			<view class="shop-list">
				<view v-for="item in shopList" :key="item.shop_id" @tap="onSelectedShop" :data-id="item.shop_id" class="shop-item dis-flex flex-y-center">
					<view class="shop-item__content flex-box">
						<view class="shop-item__title">
							<text>{{ item.shop_name }}</text>
						</view>
						<view class="shop-item__address">
							<text>地址：{{ item.region.province }}{{ item.region.city }}{{ item.region.region }}{{ item.address }}</text>
						</view>
						<view class="shop-item__phone">
							<text>联系电话：{{ item.phone }}</text>
						</view>
						<view class="shop-item__distance">
							<template v-if="item.distance">
								<text class="iconfont icon-dingwei"></text>
								<text class="f-24">{{ item.distance_unit }}</text>
							</template>
						</view>
					</view>
					<!-- 选中状态 -->
					<view v-if="item.shop_id == selectedId" class="shop-item__right"><text class="iconfont icon-iconfontduihaocopy"></text></view>
				</view>
			</view>
			<!-- 无数据提供的页面 -->
			<view v-if="!isLoading && !shopList.length">
				<view class="yoshop-notcont">
					<text class="suifont sui-wushuju"></text>
					<text class="cont">亲，暂无自提门店哦</text>
				</view>
			</view>
			<!-- 定位按钮 -->
			<view v-if="!isAuthor" class="widget-location dis-flex flex-x-center flex-y-center" catchtap="onAuthorize"><text class="iconfont icon-locate"></text></view>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			selectedId: -1,
			isAuthor: true,

			isLoading: true, // 是否正在加载中
			shopList: [] // 门店列表
		};
	},
	onLoad(options) {
		// 记录已选中的id
		this.selectedId = options.selected_id;

		// 获取默认门店列表
		this.getShopList();
		// 获取用户坐标
		this.getLocation(res => {
			this.getShopList(res.longitude, res.latitude);
		});
	},
	methods: {
		/**
		 * 获取门店列表
		 */
		getShopList(longitude, latitude) {
			this.isLoading = true;
			this.$u.api.getShopList(longitude || '', latitude || '').then(res => {
				this.shopList = res.data.list;
				this.isLoading = false;
			});
		},

		/**
		 * 获取用户坐标
		 */
		getLocation(callback) {
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					console.log(res);
					// console.log(res);
					callback && callback(res);
				},
				fail: () => {
					// #ifdef H5
					if (Tools.isWechat()) {
						this.$wechat.initJssdk(() => {
							this.$wechat.getLocation({
								type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
								success: res => {
									callback && callback(res);
								}
							});
						});
					}
					// #endif
				}
			});
		},
		/**
		 * 选择门店
		 */
		onSelectedShop(e) {
			let selectedId = e.currentTarget.dataset.id;
			// 设置选中的id
			this.selectedId = selectedId;

			// 设置上级页面的门店id
			let pages = getCurrentPages();
			if (pages.length < 2) {
				return false;
			}
			uni.$emit('selectedShop', {
				selectedShopId: selectedId
			});
			// let prevPage = pages[pages.length - 2];
			// prevPage.selectedShopId = selectedId;
			// 返回上级页面
			uni.showLoading({
				title: '确定自提点状态...',
				mask: true
			});
			setTimeout(() => {
				this.navigateBack({
					delta: 1,
					success: () => {
						uni.hideLoading();
					}
				});
			}, 500);
		}
	}
};
</script>

<style>
page {
	background: #fff;
}

.shop-list .shop-item {
	padding: 20rpx 30rpx;
	min-height: 180rpx;
	font-size: 26rpx;
	line-height: 1.5;
	border-bottom: 1px solid #eee;
}

.shop-item__title {
	font-size: 30rpx;
	color: #fd4a5f;
	margin-bottom: 10rpx;
}

.shop-item__address,
.shop-item__phone {
	color: #919396;
}

.shop-item__distance {
	margin-top: 10rpx;
	color: #c1c1c1;
	height: 40rpx;
}

.shop-item__distance .iconfont {
	color: #81838e;
	margin-right: 5rpx;
}

/* 选中图标 */

.shop-item__right {
	margin-left: 20rpx;
}

.shop-item__right text {
	color: #fd4a5f;
	font-size: 38rpx;
}

/* 定位图标 */

.widget-location {
	position: fixed;
	right: 40rpx;
	bottom: 70rpx;
	width: 72rpx;
	height: 72rpx;
	z-index: 200;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
	color: #555;
	font-size: 40rpx;
}
</style>
